<template>
  <div class="airpodsprodetails _airpodsprodetails">
    <SubNavForDetail id="airpodsprodetailnav" />
    <div id="detailsbody">
      <div class="over800px">
        <div class="dynamic">
          <div id="dynamiceara" style="">
            <img id="dynamicimgs" src="./imgs/first/1.jpg" alt="" />
            <div id="textshow">AirPods Pro</div>
          </div>
        </div>
        <div class="static">
          <AirpodsBriefInfo
            :isnew="''"
            :reversedirection="''"
            :screensize="''"
            :goodname="'这一刻，属于你。'"
            :goodsignature="'让你的 AirPods Pro 更显个性，免费镌刻服务，Apple 独家福利。'"
            :imgsrc="require('./imgs/buy_router.jpg')"
          />
          <AirpodsBriefInfo
            :isnew="''"
            :reversedirection="''"
            :screensize="''"
            :goodname="'用增强现实欣赏AirPods Pro'"
            :goodsignature="'在你的 iPhone 或 iPad 上，用 Safari 浏览器打开此页面。'"
            :imgsrc="require('./imgs/use_ar_iphone.jpg')"
          />
        </div>
      </div>
      <!-- px小于800的时候显示用 -->
      <!-- <div class="behind800px">
                <AirPodsProFirst/>
                <AirPodsProSecond/>
                <AirPodsProThird/>
                <AirPodsProForth/>
                <AirpodsBriefInfo :isnew="''" :reversedirection="''" :screensize="''" :goodname="'这一刻，属于你。'" :goodsignature="'让你的 AirPods Pro 更显个性，免费镌刻服务，Apple 独家福利。'" :imgsrc="require('./imgs/buy_router.jpg')" />
                <AirpodsBriefInfo :isnew="''" :reversedirection="''" :screensize="''" :goodname="'用增强现实欣赏AirPods Pro'" :goodsignature="'在你的 iPhone 或 iPad 上，用 Safari 浏览器打开此页面。'" :imgsrc="require('./imgs/use_ar_iphone.jpg')" />
                   
            </div> -->
    </div>
  </div>
</template>


<script>
import AirpodsBriefInfo from "./subcomponents/AirpodsBriefInfo.vue";
import SubNavForDetail from "./subcomponents/SubNavForDetail.vue";
export default {
  components: { SubNavForDetail, AirpodsBriefInfo },
  methods: {
    _scrollbehavoir() {
      // 获取页面滚动条的位置
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(scrollTop);
      // 获取图片的位置
      this.imgdom = document.getElementById("dynamicimgs");
      // 退出该页面之后就不会进行事件监视了
      var navdom = document.getElementById("airpodsprodetailnav");
      // if (navdom===null) {
      //    return
      // }
      // 其目的是为了让上面的样式在滑动的时候一致在顶部
      if (scrollTop < 40) {
        //  检查是否存在样式
        if (navdom.classList.contains("navbecomefixed")) {
          navdom.classList.remove("navbecomefixed");
        }
      } else {
        if (!navdom.classList.contains("navbecomefixed")) {
          navdom.classList.add("navbecomefixed");
        }
      }
      // 给变化的图片设置一个固定样式
      var dynamicdom = document.getElementById("dynamiceara");
      if (dynamicdom === null) {
        return;
      }
      if (scrollTop < 40) {
        if (dynamicdom.classList.contains("dynamicbecomefixed")) {
          dynamicdom.classList.remove("dynamicbecomefixed");
        }
      } else if (scrollTop < 11200) {
        if (!dynamicdom.classList.contains("dynamicbecomefixed")) {
          dynamicdom.classList.add("dynamicbecomefixed");
        }
        if (dynamicdom.classList.contains("dynamicbecomeabsolute")) {
          dynamicdom.classList.remove("dynamicbecomeabsolute");
        }
      }
      // 当scrollTop大于11200的时候
      else {
        if (dynamicdom.classList.contains("dynamicbecomefixed")) {
          dynamicdom.classList.remove("dynamicbecomefixed");
        }
        if (!dynamicdom.classList.contains("dynamicbecomeabsolute")) {
          dynamicdom.classList.add("dynamicbecomeabsolute");
        }
      }

      var textshowdom = document.getElementById("textshow");
      if (scrollTop >= 0 && scrollTop < 700) {
        // 给文字设置一个高度
        textshowdom.style.top = String(340 - scrollTop * 0.8) + "px";
        textshowdom.style.fontSize = "6.0607vw";
        textshowdom.innerHTML = "AirPods Pro";
        // 设置文字的透明度
        textshowdom.style.opacity = "1";
        textshowdom.style.color = "rgb(255,255,255)";
      } else if (scrollTop >= 700 && scrollTop < 1150) {
        textshowdom.innerHTML = "主动降噪，声声入耳更沉静";
        textshowdom.style.top = String(400 - (scrollTop - 700) * 0.1) + "px";
        textshowdom.style.fontSize = "5.0607vw";
        textshowdom.style.color = "rgb(255,255,255)";
        if (scrollTop < 800) {
          textshowdom.style.opacity = String(0 + (scrollTop - 700) * 0.01);
        }
        textshowdom.style.opacity = String(1 - (scrollTop - 900) * 0.007);
      } else if (scrollTop >= 1150 && scrollTop < 1600) {
        textshowdom.innerHTML = "通透模式，听到周围的声音";
        textshowdom.style.top = String(400 - (scrollTop - 1150) * 0.1) + "px";
        textshowdom.style.fontSize = "5.0607vw";
        textshowdom.style.color = "rgb(255,255,255)";
        if (scrollTop < 1250) {
          textshowdom.style.opacity = String(0 + (scrollTop - 1150) * 0.01);
        }
        textshowdom.style.opacity = String(1 - (scrollTop - 1250) * 0.0035);
      } 
      else if (scrollTop >= 2500 && scrollTop < 3000) {
        textshowdom.innerHTML = "贴耳更贴心";
        textshowdom.style.top = String(400 - (scrollTop - 2500) * 0.1) + "px";
        textshowdom.style.fontSize = "7.0607vw";
        textshowdom.style.transform = "translate(-50%,0)";
        textshowdom.style.width = "auto";
        textshowdom.style.color = "rgb(255,255,255)";
        if (scrollTop < 2600) {
          textshowdom.style.opacity = String(0 + (scrollTop - 2500) * 0.01);
        }
        textshowdom.style.opacity = String(1 - (scrollTop - 2600) * 0.003);
      } 
      else if (scrollTop >= 1600 && scrollTop < 2500) {
        textshowdom.innerHTML = "";
      } 
      else if (scrollTop >= 3200 && scrollTop < 3700) {
        textshowdom.innerHTML =
          "我们将能够提升舒适的每处细节进行打磨，将入耳式耳机带到一个新高度。因此你可以听到美妙的声音而感觉不到耳机的存在。";
        textshowdom.style.top = String(500 - (scrollTop - 3200) * 0.1) + "px";
        textshowdom.style.fontSize = "1.567vw";
        //  textshowdom.style.left='200px'
        textshowdom.style.transform = "translate(-450px,0)";
        textshowdom.style.width = "400px";
        textshowdom.style.color = "rgb(255,255,255)";
        if (scrollTop < 3300) {
          textshowdom.style.opacity = String(0 + (scrollTop - 3200) * 0.01);
        }
        textshowdom.style.opacity = String(1 - (scrollTop - 3300) * 0.003);
      }
      else if (scrollTop>=3800&&scrollTop<4300) {
        textshowdom.innerHTML='柔软、富有弹性的硅胶耳塞有三种尺寸可选，而且一按即合。你可以通过耳塞贴合度测试，挑选出合适的尺寸，获得理想的音效。'
        textshowdom.style.top=String(500-(scrollTop-3800)*0.1)+'px'
        textshowdom.style.fontSize='1.567vw'
        textshowdom.transform='translate(-450px,0)'
        textshowdom.style.width = "400px";
        textshowdom.style.color = "rgb(255,255,255)";
        if (scrollTop<3900) {
          textshowdom.style.opacity=String(0+(scrollTop-3800)*0.01)
        }
        textshowdom.style.opacity=String(1-(scrollTop-3900)*0.003)
      }
      else if(scrollTop>=4450&&scrollTop<4950){
             textshowdom.innerHTML='阻隔噪音，<br>倾耳听。'
             textshowdom.style.top=String(300-(scrollTop-4450)*0.1)+'px'
             textshowdom.style.fontSize='7.067vw'
             textshowdom.style.transform='translate(-50%,0)'
             textshowdom.style.width='auto'
             textshowdom.style.color='rgb(255,255,255)'
             if(scrollTop<4550){
                 textshowdom.style.opacity=String(0+(scrollTop-4450)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-4550)*0.003)
        }
        else if(scrollTop>=5300&&scrollTop<5900){
             textshowdom.innerHTML='AirPods Pro 具备主动降噪功能，可根据你耳部的几何结构和耳塞的佩戴贴合度持续进行调节，以阻隔外界噪音，让你听得更专注。这，在入耳式耳机中堪称独树一帜。'
             textshowdom.style.top=String(500-(scrollTop-5300)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(100px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(255,255,255)'
             if(scrollTop<5400){
                 textshowdom.style.opacity=String(0+(scrollTop-5300)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-5400)*0.003)
        }
        else if(scrollTop>=6600&&scrollTop<7200){
             textshowdom.innerHTML='想听到周围的声音？只需长按耳机柄上的力度感应器，便可在主动降噪与通透模式间切换。通透模式可以让外界声音进入，这样当你在与身边的人交谈时，一切听起来、感觉起来都会很自然。'
             textshowdom.style.top=String(400-(scrollTop-6600)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(-400px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(255,255,255)'
             if(scrollTop<6700){
                 textshowdom.style.opacity=String(0+(scrollTop-6600)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-6700)*0.002)
        }
        else if(scrollTop>=7800&&scrollTop<8200){
            //  textshowdom.innerHTML='想听到周围的声音？只需长按耳机柄上的力度感应器，便可在主动降噪与通透模式间切换。通透模式可以让外界声音进入，这样当你在与身边的人交谈时，一切听起来、感觉起来都会很自然。'
            //  textshowdom.style.top=String(400-(scrollTop-6600)*0.1)+'px'
            //  textshowdom.style.fontSize='1.567vw'
            //  textshowdom.style.transform='translate(-400px,0)'
            //  textshowdom.style.width='400px'

             if(scrollTop<8000){
                 this.imgdom.style.opacity=String(1-(scrollTop-7800)*0.002)
             }
             this.imgdom.style.opacity=String(0+(scrollTop-8000)*0.01)
        }
        else if(scrollTop>=8300&&scrollTop<8800){
             textshowdom.innerHTML='自适应播放功能能根据你的耳朵自行调节进行播放，带来细腻的听音体验，让你尽显非凡音质。'
             textshowdom.style.top=String(500-(scrollTop-8300)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(100px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(0,0,0)'
             if(scrollTop<8400){
                 textshowdom.style.opacity=String(0+(scrollTop-8300)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-8400)*0.004)
        }
        else if(scrollTop>=8800&&scrollTop<9300){
             textshowdom.innerHTML='使用力度感应器能方便地控制音乐和通话，还可在主动降噪与通透模式间切换。你也可按住 iPhone 控制中心的音量滑块，再进行模式切换。'
             textshowdom.style.top=String(500-(scrollTop-8800)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(100px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(0,0,0)'
             if(scrollTop<8900){
                 textshowdom.style.opacity=String(0+(scrollTop-8800)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-8900)*0.004)
        }
        else if(scrollTop>=9400&&scrollTop<9900){
             textshowdom.innerHTML='AirPods Pro 抗汗抗水1，能时刻紧跟你的运动节奏。而通过扩大麦克风网状声孔，也提升了有风环境下的通话清晰度。'
             textshowdom.style.top=String(250-(scrollTop-9400)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(-500px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(0,0,0)'
             if(scrollTop<9500){
                 textshowdom.style.opacity=String(0+(scrollTop-9400)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-9500)*0.004)
        }
        else if(scrollTop>=9400&&scrollTop<9900){
             textshowdom.innerHTML='AirPods Pro 抗汗抗水1，能时刻紧跟你的运动节奏。而通过扩大麦克风网状声孔，也提升了有风环境下的通话清晰度。'
             textshowdom.style.top=String(250-(scrollTop-9400)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(-500px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(0,0,0)'
             if(scrollTop<9500){
                 textshowdom.style.opacity=String(0+(scrollTop-9400)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-9500)*0.004)
        }
        else if(scrollTop>=9400&&scrollTop<9900){
             textshowdom.innerHTML='AirPods Pro 抗汗抗水1，能时刻紧跟你的运动节奏。而通过扩大麦克风网状声孔，也提升了有风环境下的通话清晰度。'
             textshowdom.style.top=String(250-(scrollTop-9400)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(-500px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(0,0,0)'
             if(scrollTop<9500){
                 textshowdom.style.opacity=String(0+(scrollTop-9400)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-9500)*0.004)
        }
        else if(scrollTop>=10000&&scrollTop<10300){
             textshowdom.innerHTML='充电无限，<br> 放电不倦'
             textshowdom.style.top=String(300-(scrollTop-10000)*0.1)+'px'
             textshowdom.style.fontSize='5.567vw'
             textshowdom.style.transform='translate(-50%,0)'
             textshowdom.style.width='auto'
             textshowdom.style.color='rgb(255,255,255)'
             if(scrollTop<10100){
                 textshowdom.style.opacity=String(0+(scrollTop-10000)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-10100)*0.005)
        }

        else if(scrollTop>=10500&&scrollTop<11000){
             textshowdom.innerHTML='超过<br> 24小时 <br>使用充电盒额外充电的总时间<br><br> 最长可达<br> 4.5小时<br> 单次充电的聆听时间<br><br>大约1小时<br>仅充电 5 分钟的聆听时间'
             textshowdom.style.top=String(300-(scrollTop-10500)*0.1)+'px'
             textshowdom.style.fontSize='1.567vw'
             textshowdom.style.transform='translate(-550px,0)'
             textshowdom.style.width='400px'
             textshowdom.style.color='rgb(255,255,255)'
             textshowdom.style.textAlign='left'
             if(scrollTop<10700){
                 textshowdom.style.opacity=String(0+(scrollTop-10500)*0.01)
             }
             textshowdom.style.opacity=String(1-(scrollTop-10700)*0.005)
        }
        else{
            textshowdom.style.top=String(340-scrollTop*0.8)+'px'
            textshowdom.style.fontSize='6.067vw'
            textshowdom.innerHTML='AirPods Pro'
            textshowdom.style.opacity='1'
            textshowdom.style.color='rgb(255,255,255)'
            this.imgdom.style.opacity='1'

        }
      if (scrollTop < 0) {
        //
        this.imgdom.src = require("./imgs/first/1.jpg");
        return;
      }
      if (scrollTop < 40) {
        // this.imgdom.src='url("./imgs/first/1.jpg")'
        this.imgdom.src = require("./imgs/first/2.jpg");
        return;
      }
      if (scrollTop < 80) {
        this.imgdom.src = require("./imgs/first/3.jpg");
        return;
      }
      if (scrollTop < 120) {
        this.imgdom.src = require("./imgs/first/4.jpg");
        return;
      }
      if (scrollTop < 160) {
        this.imgdom.src = require("./imgs/first/5.jpg");
        return;
      }
      if (scrollTop < 200) {
        this.imgdom.src = require("./imgs/first/6.jpg");
        return;
      }
      if (scrollTop < 240) {
        this.imgdom.src = require("./imgs/first/7.jpg");
        return;
      }
      if (scrollTop < 280) {
        this.imgdom.src = require("./imgs/first/8.jpg");
        return;
      }
      if (scrollTop < 320) {
        this.imgdom.src = require("./imgs/first/9.jpg");
        return;
      }
      if (scrollTop < 360) {
        this.imgdom.src = require("./imgs/first/10.jpg");
        return;
      }
      if (scrollTop < 400) {
        this.imgdom.src = require("./imgs/first/11.jpg");
        return;
      }
      if (scrollTop < 440) {
        this.imgdom.src = require("./imgs/first/12.jpg");
        return;
      }
      if (scrollTop < 480) {
        this.imgdom.src = require("./imgs/first/13.jpg");
        return;
      }
      if (scrollTop < 520) {
        this.imgdom.src = require("./imgs/first/14.jpg");
        return;
      }
      if (scrollTop < 560) {
        this.imgdom.src = require("./imgs/first/15.jpg");
        return;
      }

      if (scrollTop < 600) {
        this.imgdom.src = require("./imgs/first/15.jpg");
        return;
      }
      if (scrollTop < 640) {
        this.imgdom.src = require("./imgs/first/14.jpg");
        return;
      }
      if (scrollTop < 680) {
        this.imgdom.src = require("./imgs/first/13.jpg");
        return;
      }
      if (scrollTop < 720) {
        this.imgdom.src = require("./imgs/first/12.jpg");
        return;
      }
      if (scrollTop < 760) {
        this.imgdom.src = require("./imgs/first/11.jpg");
        return;
      }
      if (scrollTop < 800) {
        this.imgdom.src = require("./imgs/first/10.jpg");
        return;
      }
      if (scrollTop < 840) {
        this.imgdom.src = require("./imgs/first/9.jpg");
        return;
      }
      if (scrollTop < 880) {
        this.imgdom.src = require("./imgs/first/8.jpg");
        return;
      }
      if (scrollTop < 920) {
        this.imgdom.src = require("./imgs/first/7.jpg");
        return;
      }
      if (scrollTop < 960) {
        this.imgdom.src = require("./imgs/first/6.jpg");
        return;
      }
      if (scrollTop < 1000) {
        this.imgdom.src = require("./imgs/first/5.jpg");
        return;
      }
      if (scrollTop < 1040) {
        this.imgdom.src = require("./imgs/first/4.jpg");
        return;
      }
      if (scrollTop < 1080) {
        this.imgdom.src = require("./imgs/first/3.jpg");
        return;
      }
      if (scrollTop < 1120) {
        this.imgdom.src = require("./imgs/first/2.jpg");
        return;
      }
      if (scrollTop < 1160) {
        this.imgdom.src = require("./imgs/first/1.jpg");
        return;
      }
      if (scrollTop < 1230) {
        this.imgdom.src = require("./imgs/first/16.jpg");
        return;
      }
      if (scrollTop < 1280) {
        this.imgdom.src = require("./imgs/first/17.jpg");
        return;
      }
      if (scrollTop < 1330) {
        this.imgdom.src = require("./imgs/first/18.jpg");
        return;
      }
      if (scrollTop < 1390) {
        this.imgdom.src = require("./imgs/first/19.jpg");
        return;
      }

      // 第二部分
      if (scrollTop < 1600) {
        this.imgdom.src = require("./imgs/second/1.jpg");
        return;
      }
      if (scrollTop < 1640) {
        this.imgdom.src = require("./imgs/second/2.jpg");
        return;
      }
      if (scrollTop < 1680) {
        this.imgdom.src = require("./imgs/second/3.jpg");
        return;
      }
      if (scrollTop < 1720) {
        this.imgdom.src = require("./imgs/second/4.jpg");
        return;
      }
      if (scrollTop < 1760) {
        this.imgdom.src = require("./imgs/second/5.jpg");
        return;
      }
      if (scrollTop < 1800) {
        this.imgdom.src = require("./imgs/second/6.jpg");
        return;
      }
      if (scrollTop < 1840) {
        this.imgdom.src = require("./imgs/second/7.jpg");
        return;
      }
      if (scrollTop < 1880) {
        this.imgdom.src = require("./imgs/second/8.jpg");
        return;
      }
      if (scrollTop < 1920) {
        this.imgdom.src = require("./imgs/second/9.jpg");
        return;
      }
      if (scrollTop < 1960) {
        this.imgdom.src = require("./imgs/second/10.jpg");
        return;
      }
      if (scrollTop < 2000) {
        this.imgdom.src = require("./imgs/second/11.jpg");
        return;
      }
      if (scrollTop < 2040) {
        this.imgdom.src = require("./imgs/second/12.jpg");
        return;
      }
      if (scrollTop < 2080) {
        this.imgdom.src = require("./imgs/second/13.jpg");
        return;
      }
      if (scrollTop < 2120) {
        this.imgdom.src = require("./imgs/second/14.jpg");
        return;
      }
      if (scrollTop < 2140) {
        this.imgdom.src = require("./imgs/second/15.jpg");
        return;
      }
      if (scrollTop < 2180) {
        this.imgdom.src = require("./imgs/second/16.jpg");
        return;
      }
      if (scrollTop < 2220) {
        this.imgdom.src = require("./imgs/second/17.jpg");
        return;
      }
      if (scrollTop < 2260) {
        this.imgdom.src = require("./imgs/second/18.jpg");
        return;
      }
      if (scrollTop < 2300) {
        this.imgdom.src = require("./imgs/second/19.jpg");
        return;
      }
      if (scrollTop < 2340) {
        this.imgdom.src = require("./imgs/second/20.jpg");
        return;
      }
      if (scrollTop < 2380) {
        this.imgdom.src = require("./imgs/second/21.jpg");
        return;
      }
      if (scrollTop < 2420) {
        this.imgdom.src = require("./imgs/second/22.jpg");
        return;
      }
      if (scrollTop < 2460) {
        this.imgdom.src = require("./imgs/second/23.jpg");
        return;
      }
      if (scrollTop < 2500) {
        this.imgdom.src = require("./imgs/second/24.jpg");
        return;
      }
      if (scrollTop < 2540) {
        this.imgdom.src = require("./imgs/second/25.jpg");
        return;
      }
      if (scrollTop < 2580) {
        this.imgdom.src = require("./imgs/second/26.jpg");
        return;
      }
      if (scrollTop < 2620) {
        this.imgdom.src = require("./imgs/second/27.jpg");
        return;
      }
      if (scrollTop < 2660) {
        this.imgdom.src = require("./imgs/second/28.jpg");
        return;
      }
      if (scrollTop < 2700) {
        this.imgdom.src = require("./imgs/second/29.jpg");
        return;
      }
      if (scrollTop < 2740) {
        this.imgdom.src = require("./imgs/second/30.jpg");
        return;
      }
      if (scrollTop < 2780) {
        this.imgdom.src = require("./imgs/second/31.jpg");
        return;
      }
      if (scrollTop < 2820) {
        this.imgdom.src = require("./imgs/second/32.jpg");
        return;
      }
      if (scrollTop < 2860) {
        this.imgdom.src = require("./imgs/second/33.jpg");
        return;
      }
      if (scrollTop < 2900) {
        this.imgdom.src = require("./imgs/second/34.jpg");
        return;
      }
      if (scrollTop < 2940) {
        this.imgdom.src = require("./imgs/second/35.jpg");
        return;
      }
      if (scrollTop < 2980) {
        this.imgdom.src = require("./imgs/second/36.jpg");
        return;
      }
      if (scrollTop < 3020) {
        this.imgdom.src = require("./imgs/second/37.jpg");
        return;
      }
      if (scrollTop < 3060) {
        this.imgdom.src = require("./imgs/second/38.jpg");
        return;
      }
      if (scrollTop < 3120) {
        this.imgdom.src = require("./imgs/second/39.jpg");
        return;
      }
      if (scrollTop < 3160) {
        this.imgdom.src = require("./imgs/second/40.jpg");
        return;
      }
      if (scrollTop < 3200) {
        this.imgdom.src = require("./imgs/second/41.jpg");
        return;
      }
      if (scrollTop < 3250) {
        this.imgdom.src = require("./imgs/second/42.jpg");
        return;
      }
      if (scrollTop < 3300) {
        this.imgdom.src = require("./imgs/second/43.jpg");
        return;
      }
      if (scrollTop < 3350) {
        this.imgdom.src = require("./imgs/second/44.jpg");
        return;
      }
      if (scrollTop < 3400) {
        this.imgdom.src = require("./imgs/second/45.jpg");
        return;
      }
      if (scrollTop < 3450) {
        this.imgdom.src = require("./imgs/second/46.jpg");
        return;
      }
      if (scrollTop < 3500) {
        this.imgdom.src = require("./imgs/second/47.jpg");
        return;
      }
      if (scrollTop < 3550) {
        this.imgdom.src = require("./imgs/second/48.jpg");
        return;
      }

      if (scrollTop < 3600) {
        this.imgdom.src = require("./imgs/second/49.jpg");
        return;
      }
      if (scrollTop < 3650) {
        this.imgdom.src = require("./imgs/second/50.jpg");
        return;
      }
      if (scrollTop < 3700) {
        this.imgdom.src = require("./imgs/second/51.jpg");
        return;
      }
      if (scrollTop < 3750) {
        this.imgdom.src = require("./imgs/second/52.jpg");
        return;
      }
      if (scrollTop < 3800) {
        this.imgdom.src = require("./imgs/second/53.jpg");
        return;
      }
      if (scrollTop < 3850) {
        this.imgdom.src = require("./imgs/second/54.jpg");
        return;
      }
      if (scrollTop < 3900) {
        this.imgdom.src = require("./imgs/second/55.jpg");
        return;
      }
      if (scrollTop < 3950) {
        this.imgdom.src = require("./imgs/second/56.jpg");
        return;
      }
      if (scrollTop < 4000) {
        this.imgdom.src = require("./imgs/second/57.jpg");
        return;
      }
      if (scrollTop < 4050) {
        this.imgdom.src = require("./imgs/second/58.jpg");
        return;
      }
      if (scrollTop < 4100) {
        this.imgdom.src = require("./imgs/second/59.jpg");
        return;
      }
      if (scrollTop < 4150) {
        this.imgdom.src = require("./imgs/second/60.jpg");
        return;
      }
      if (scrollTop < 4200) {
        this.imgdom.src = require("./imgs/second/61.jpg");
        return;
      }
      if (scrollTop < 4250) {
        this.imgdom.src = require("./imgs/second/62.jpg");
        return;
      }
      if (scrollTop < 4300) {
        this.imgdom.src = require("./imgs/second/63.jpg");
        return;
      }
      if (scrollTop < 4400) {
        this.imgdom.src = require("./imgs/second/64.jpg");
        return;
      }
      if (scrollTop < 4450) {
        this.imgdom.src = require("./imgs/second/65.jpg");
        return;
      }
      if (scrollTop < 4500) {
        this.imgdom.src = require("./imgs/second/66.jpg");
        return;
      }
      if (scrollTop < 4550) {
        this.imgdom.src = require("./imgs/second/67.jpg");
        return;
      }
      if (scrollTop < 4600) {
        this.imgdom.src = require("./imgs/second/68.jpg");
        return;
      }
      if (scrollTop < 4650) {
        this.imgdom.src = require("./imgs/second/69.jpg");
        return;
      }
      if (scrollTop < 4700) {
        this.imgdom.src = require("./imgs/second/70.jpg");
        return;
      }
      if (scrollTop < 4750) {
        this.imgdom.src = require("./imgs/second/71.jpg");
        return;
      }
      if (scrollTop < 4800) {
        this.imgdom.src = require("./imgs/second/72.jpg");
        return;
      }
      if (scrollTop < 4850) {
        this.imgdom.src = require("./imgs/second/73.jpg");
        return;
      }
      if (scrollTop < 4900) {
        this.imgdom.src = require("./imgs/second/74.jpg");
        return;
      }
      if (scrollTop < 4950) {
        this.imgdom.src = require("./imgs/second/75.jpg");
        return;
      }
      if (scrollTop < 5000) {
        this.imgdom.src = require("./imgs/second/76.jpg");
        return;
      }
      if (scrollTop < 5150) {
        this.imgdom.src = require("./imgs/second/77.jpg");
        return;
      }
      if (scrollTop < 5200) {
        this.imgdom.src = require("./imgs/second/78.jpg");
        return;
      }
      if (scrollTop < 5250) {
        this.imgdom.src = require("./imgs/second/79.jpg");
        return;
      }
      if (scrollTop < 5300) {
        this.imgdom.src = require("./imgs/second/80.jpg");
        return;
      }
      if (scrollTop < 5350) {
        this.imgdom.src = require("./imgs/second/81.jpg");
        return;
      }
      if (scrollTop < 5400) {
        this.imgdom.src = require("./imgs/second/82.jpg");
        return;
      }
      if (scrollTop < 5450) {
        this.imgdom.src = require("./imgs/second/83.jpg");
        return;
      }
      if (scrollTop < 5500) {
        this.imgdom.src = require("./imgs/second/84.jpg");
        return;
      }
      if (scrollTop < 5550) {
        this.imgdom.src = require("./imgs/second/85.jpg");
        return;
      }
      if (scrollTop < 5600) {
        this.imgdom.src = require("./imgs/second/86.jpg");
        return;
      }
      if (scrollTop < 5750) {
        this.imgdom.src = require("./imgs/second/87.jpg");
        return;
      }
      if (scrollTop < 5800) {
        this.imgdom.src = require("./imgs/second/88.jpg");
        return;
      }
      if (scrollTop < 5850) {
        this.imgdom.src = require("./imgs/second/89.jpg");
        return;
      }
      if (scrollTop < 5900) {
        this.imgdom.src = require("./imgs/second/90.jpg");
        return;
      }
      if (scrollTop < 5950) {
        this.imgdom.src = require("./imgs/second/91.jpg");
        return;
      }
      if (scrollTop < 6000) {
        this.imgdom.src = require("./imgs/second/92.jpg");
        return;
      }
      if (scrollTop < 6050) {
        this.imgdom.src = require("./imgs/second/93.jpg");
        return;
      }
      if (scrollTop < 6100) {
        this.imgdom.src = require("./imgs/second/94.jpg");
        return;
      }
      //第三部分
      if (scrollTop < 6200) {
        this.imgdom.src = require("./imgs/third/1.jpg");
        return;
      }
      if (scrollTop < 6250) {
        this.imgdom.src = require("./imgs/third/2.jpg");
        return;
      }
      if (scrollTop < 6300) {
        this.imgdom.src = require("./imgs/third/3.jpg");
        return;
      }
      if (scrollTop < 6350) {
        this.imgdom.src = require("./imgs/third/4.jpg");
        return;
      }
      if (scrollTop < 6400) {
        this.imgdom.src = require("./imgs/third/5.jpg");
        return;
      }
      if (scrollTop < 6450) {
        this.imgdom.src = require("./imgs/third/6.jpg");
        return;
      }
      if (scrollTop < 6500) {
        this.imgdom.src = require("./imgs/third/7.jpg");
        return;
      }
      if (scrollTop < 6550) {
        this.imgdom.src = require("./imgs/third/8.jpg");
        return;
      }
      if (scrollTop < 6600) {
        this.imgdom.src = require("./imgs/third/9.jpg");
        return;
      }
      if (scrollTop < 6650) {
        this.imgdom.src = require("./imgs/third/10.jpg");
        return;
      }
      if (scrollTop < 6700) {
        this.imgdom.src = require("./imgs/third/11.jpg");
        return;
      }
      if (scrollTop < 6750) {
        this.imgdom.src = require("./imgs/third/12.jpg");
        return;
      }
      if (scrollTop < 6800) {
        this.imgdom.src = require("./imgs/third/13.jpg");
        return;
      }
      if (scrollTop < 6850) {
        this.imgdom.src = require("./imgs/third/14.jpg");
        return;
      }
      if (scrollTop < 6900) {
        this.imgdom.src = require("./imgs/third/15.jpg");
        return;
      }
      if (scrollTop < 6950) {
        this.imgdom.src = require("./imgs/third/16.jpg");
        return;
      }
      if (scrollTop < 7000) {
        this.imgdom.src = require("./imgs/third/17.jpg");
        return;
      }
      if (scrollTop < 7050) {
        this.imgdom.src = require("./imgs/third/18.jpg");
        return;
      }
      if (scrollTop < 7100) {
        this.imgdom.src = require("./imgs/third/19.jpg");
        return;
      }
      if (scrollTop < 7150) {
        this.imgdom.src = require("./imgs/third/20.jpg");
        return;
      }
      if (scrollTop < 7200) {
        this.imgdom.src = require("./imgs/third/21.jpg");
        return;
      }
      if (scrollTop < 7250) {
        this.imgdom.src = require("./imgs/third/22.jpg");
        return;
      }
      if (scrollTop < 7300) {
        this.imgdom.src = require("./imgs/third/23.jpg");
        return;
      }
      if (scrollTop < 7350) {
        this.imgdom.src = require("./imgs/third/24.jpg");
        return;
      }
      if (scrollTop < 7400) {
        this.imgdom.src = require("./imgs/third/25.jpg");
        return;
      }
      if (scrollTop < 7450) {
        this.imgdom.src = require("./imgs/third/26.jpg");
        return;
      }
      if (scrollTop < 7500) {
        this.imgdom.src = require("./imgs/third/27.jpg");
        return;
      }
      if (scrollTop < 7550) {
        this.imgdom.src = require("./imgs/third/28.jpg");
        return;
      }
      if (scrollTop < 7600) {
        this.imgdom.src = require("./imgs/third/29.jpg");
        return;
      }
      if (scrollTop < 7650) {
        this.imgdom.src = require("./imgs/third/30.jpg");
        return;
      }
      if (scrollTop < 7700) {
        this.imgdom.src = require("./imgs/third/31.jpg");
        return;
      }
      if (scrollTop < 7750) {
        this.imgdom.src = require("./imgs/third/32.jpg");
        return;
      }
      if (scrollTop < 7800) {
        this.imgdom.src = require("./imgs/third/33.jpg");
        return;
      }
      if (scrollTop < 7850) {
        this.imgdom.src = require("./imgs/third/34.jpg");
        return;
      }
      // 第四部分
      if (scrollTop < 8300) {
        this.imgdom.src = require("./imgs/forth/1.jpg");
        return;
      }
      if (scrollTop < 8350) {
        this.imgdom.src = require("./imgs/forth/2.jpg");
        return;
      }
      if (scrollTop < 8430) {
        this.imgdom.src = require("./imgs/forth/3.jpg");
        return;
      }
      if (scrollTop < 8400) {
        this.imgdom.src = require("./imgs/forth/4.jpg");
        return;
      }
      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/5.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/6.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/7.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/8.jpg");
        return;
      }

      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/9.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/10.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/11.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/12.jpg");
        return;
      }

      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/13.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/14.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/15.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/16.jpg");
        return;
      }

      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/17.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/18.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/19.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/20.jpg");
        return;
      }

      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/21.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/22.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/23.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/24.jpg");
        return;
      }

      if (scrollTop < 8470) {
        this.imgdom.src = require("./imgs/forth/25.jpg");
        return;
      }
      if (scrollTop < 8540) {
        this.imgdom.src = require("./imgs/forth/26.jpg");
        return;
      }
      if (scrollTop < 8610) {
        this.imgdom.src = require("./imgs/forth/27.jpg");
        return;
      }
      if (scrollTop < 8690) {
        this.imgdom.src = require("./imgs/forth/28.jpg");
        return;
      }
      if (scrollTop < 8750) {
        this.imgdom.src = require("./imgs/forth/29.jpg");
        return;
      }
      if (scrollTop < 8800) {
        this.imgdom.src = require("./imgs/forth/30.jpg");
        return;
      }
      if (scrollTop < 8850) {
        this.imgdom.src = require("./imgs/forth/31.jpg");
        return;
      }
      if (scrollTop < 8900) {
        this.imgdom.src = require("./imgs/forth/32.jpg");
        return;
      }
      if (scrollTop < 8950) {
        this.imgdom.src = require("./imgs/forth/33.jpg");
        return;
      }
      if (scrollTop < 9000) {
        this.imgdom.src = require("./imgs/forth/34.jpg");
        return;
      }
      if (scrollTop < 9050) {
        this.imgdom.src = require("./imgs/forth/35.jpg");
        return;
      }
      if (scrollTop < 9100) {
        this.imgdom.src = require("./imgs/forth/36.jpg");
        return;
      }
      if (scrollTop < 9150) {
        this.imgdom.src = require("./imgs/forth/37.jpg");
        return;
      }
      if (scrollTop < 9200) {
        this.imgdom.src = require("./imgs/forth/38.jpg");
        return;
      }
      if (scrollTop < 9250) {
        this.imgdom.src = require("./imgs/forth/39.jpg");
        return;
      }
      if (scrollTop < 9300) {
        this.imgdom.src = require("./imgs/forth/40.jpg");
        return;
      }
      if (scrollTop < 9350) {
        this.imgdom.src = require("./imgs/forth/41.jpg");
        return;
      }
      if (scrollTop < 9400) {
        this.imgdom.src = require("./imgs/forth/42.jpg");
        return;
      }
      if (scrollTop < 9450) {
        this.imgdom.src = require("./imgs/forth/43.jpg");
        return;
      }
      if (scrollTop < 9500) {
        this.imgdom.src = require("./imgs/forth/44.jpg");
        return;
      }
      if (scrollTop < 9550) {
        this.imgdom.src = require("./imgs/forth/45.jpg");
        return;
      }
      if (scrollTop < 9600) {
        this.imgdom.src = require("./imgs/forth/46.jpg");
        return;
      }
      // 第五部分
      if (scrollTop < 9650) {
        this.imgdom.src = require("./imgs/fifth/1.jpg");
        return;
      }
      if (scrollTop < 9700) {
        this.imgdom.src = require("./imgs/fifth/2.jpg");
        return;
      }
      if (scrollTop < 9750) {
        this.imgdom.src = require("./imgs/fifth/3.jpg");
        return;
      }
      if (scrollTop < 9800) {
        this.imgdom.src = require("./imgs/fifth/4.jpg");
        return;
      }
      if (scrollTop < 9850) {
        this.imgdom.src = require("./imgs/fifth/5.jpg");
        return;
      }
      if (scrollTop < 9900) {
        this.imgdom.src = require("./imgs/fifth/6.jpg");
        return;
      }
      if (scrollTop < 9950) {
        this.imgdom.src = require("./imgs/fifth/7.jpg");
        return;
      }
      if (scrollTop < 10000) {
        this.imgdom.src = require("./imgs/fifth/8.jpg");
        return;
      }
      if (scrollTop < 10050) {
        this.imgdom.src = require("./imgs/fifth/9.jpg");
        return;
      }
      if (scrollTop < 10100) {
        this.imgdom.src = require("./imgs/fifth/10.jpg");
        return;
      }
      if (scrollTop < 10150) {
        this.imgdom.src = require("./imgs/fifth/11.jpg");
        return;
      }
      if (scrollTop < 10200) {
        this.imgdom.src = require("./imgs/fifth/12.jpg");
        return;
      }
      if (scrollTop < 10250) {
        this.imgdom.src = require("./imgs/fifth/13.jpg");
        return;
      }
      if (scrollTop < 10300) {
        this.imgdom.src = require("./imgs/fifth/14.jpg");
        return;
      }
      if (scrollTop < 10350) {
        this.imgdom.src = require("./imgs/fifth/15.jpg");
        return;
      }
      if (scrollTop < 10400) {
        this.imgdom.src = require("./imgs/fifth/16.jpg");
        return;
      }
      if (scrollTop < 10450) {
        this.imgdom.src = require("./imgs/fifth/17.jpg");
        return;
      }
      if (scrollTop < 10500) {
        this.imgdom.src = require("./imgs/fifth/18.jpg");
        return;
      }
      if (scrollTop < 10550) {
        this.imgdom.src = require("./imgs/fifth/19.jpg");
        return;
      }
      if (scrollTop < 10600) {
        this.imgdom.src = require("./imgs/fifth/20.jpg");
        return;
      }
      if (scrollTop < 10650) {
        this.imgdom.src = require("./imgs/fifth/21.jpg");
        return;
      }
      if (scrollTop < 10700) {
        this.imgdom.src = require("./imgs/fifth/22.jpg");
        return;
      }
      if (scrollTop < 10750) {
        this.imgdom.src = require("./imgs/fifth/23.jpg");
        return;
      }
      if (scrollTop < 10800) {
        this.imgdom.src = require("./imgs/fifth/24.jpg");
        return;
      }
      if (scrollTop < 10850) {
        this.imgdom.src = require("./imgs/fifth/25.jpg");
        return;
      }
      if (scrollTop < 10900) {
        this.imgdom.src = require("./imgs/fifth/26.jpg");
        return;
      }
      if (scrollTop < 10950) {
        this.imgdom.src = require("./imgs/fifth/27.jpg");
        return;
      }
      if (scrollTop < 11000) {
        this.imgdom.src = require("./imgs/fifth/28.jpg");
        return;
      }
      if (scrollTop < 11050) {
        this.imgdom.src = require("./imgs/fifth/29.jpg");
        return;
      }
      if (scrollTop < 11100) {
        this.imgdom.src = require("./imgs/fifth/30.jpg");
        return;
      }
      if (scrollTop < 11150) {
        this.imgdom.src = require("./imgs/fifth/31.jpg");
        return;
      }
      if (scrollTop < 11200) {
        this.imgdom.src = require("./imgs/fifth/32.jpg");
        return;
      }
    },
    //
    ScrollTopCansel() {
      // window.removeEventListener('scroll',this._scrollbehavoir)
      console.log("已经移除scroll绑定事件");
    },
  },
  created() {
    window.addEventListener("scroll", this._scrollbehavoir);
  },
  // 情境一：离开当前路由，会直接调用；
  // 当前路由不使用 缓存，离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁
  // 情景二：离开当前路由，不会直接调用，需要程序控制调用
  beforeDestroy() {
    window.removeEventListener("scroll", this._scrollbehavoir);
    console.log("已经移除scroll绑定事件");
  },
};
</script>

<style lang="less" scoped>
// 生成绝对定位的元素， 相对于浏览器窗口进行定位
.navbecomefixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
@media only screen and(min-width:800px) {
  //  设置一个图片的存放
  .dynamicbecomefixed {
    position: fixed !important;
    top: 50%;
    left: 50%;
    //  这里的值要小于导航栏
    z-index: 500;
    transform: translate(-50%, -50%);
  }
  @keyframes appear {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .dynamicbecomeabsolute {
    position: absolute !important;
    left: 50%;
    bottom: 0;
    z-index: 500;
    transform: translateX(-50%);
  }
  .airpodsprodetails {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: black;
    #detailsbody {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .over800px {
        width: 100%;
        .dynamic {
          display: flex;
          flex-direction: column;
          align-items: center;
          // width:500px;
          height: 11700px;
          width: 100%;
          position: relative;
          div {
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            // position: relative;
            #dynamicimgs {
              // position: fixed !important;
              margin-top: 60px;
              width: auto;
              height: 700px;
            }
            #textshow {
              position: absolute;
              z-index: 600;
              left: 50%;
              top: 300px;
              transform: translate(-50%, -50%);
              // height: 300px !important;
              width: auto;
              color: white;
              font-size: 6.067vw;
              font-weight: 600;
              animation: appear 3s;
            }
          }
        }
        .static {
          width: 100%;
          color: black;
          display: block;
          background-color: black;
        }
      }
      .behind800px {
        display: none;
      }
    }
  }
}
</style>